<template>
  <el-drawer v-model="drawerVisible" :destroy-on-close="true" size="800px" :title="`${drawerProps.title}订单`">
    <div class="page-box">
      <div style="display: flex; width: 100%">
        <div class="title">订单状态</div>
        <div class="tag">{{ statusEnum[drawerProps.row.status - 1] }}</div>
      </div>
      <div class="info-box">
        <el-row>
          <el-col :span="8">
            <div class="item">
              <div class="item-title">客户名称：</div>
              <div class="item-content">{{ drawerProps.row.userName }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="item">
              <div class="item-title">消费金额：</div>
              <div class="item-content">
                {{ drawerProps.row.totalAmount ? (drawerProps.row.totalAmount / 100).toFixed(2) : "--" }}
              </div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="item">
              <div class="item-title">餐桌名：</div>
              <div class="item-content">{{ drawerProps.row.tableName }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="item">
              <div class="item-title">下单时间：</div>
              <div class="item-content">{{ formatTime(drawerProps.row.orderTime) }}</div>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="item">
              <div class="item-title">支付时间：</div>
              <div class="item-content">{{ formatTime(drawerProps.row.paymentTime) }}</div>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="page-box">
        <ProTable
          ref="proTable"
          :tool-button="false"
          :pagination="false"
          highlight-current-row
          :columns="columns"
          :data="drawerProps.row.list"
        >
          <template #price="scope">
            {{ scope.row.price ? (scope.row.price / 100).toFixed(2) : "--" }}
          </template>
        </ProTable>
      </div>
    </div>
  </el-drawer>
</template>
<script setup lang="ts">
import { ref, reactive } from "vue";
import ProTable from "@/components/ProTable/index.vue";
import { ColumnProps, ProTableInstance } from "@/components/ProTable/interface";
import dayjs from "dayjs";

const statusEnum = ["待支付", "已支付", "已取消", "已退款"];

const proTable = ref<ProTableInstance>();

const columns = reactive<ColumnProps<any>[]>([
  { prop: "menuName", label: "菜品名", minWidth: "200" },
  { prop: "quantity", label: "数量", minWidth: "100" },
  { prop: "price", label: "小计", minWidth: "100" }
]);

interface DrawerProps {
  title: string;
  isView: boolean;
  row: any;
  api?: (params: any) => Promise<any>;
  getTableList?: () => void;
}
const drawerVisible = ref(false);
const drawerProps = ref<DrawerProps>({
  isView: false,
  title: "",
  row: {}
});

const acceptParams = (params: DrawerProps) => {
  console.log("accept", params);
  drawerProps.value = params;
  drawerVisible.value = true;
};

defineExpose({
  acceptParams
});
const formatTime = (ts?: number | string | null) => {
  if (!ts) return "--";
  const t = ts.toString().length === 10 ? Number(ts) * 1000 : Number(ts);
  return dayjs(t).format("YYYY-MM-DD HH:mm");
};
</script>
<style lang="scss" scoped>
.page-box {
  width: 100%;
  height: 100%;
  .title {
    margin-right: 8px;
    font-size: 18px;
    font-weight: 500;
  }
  .tag {
    font-size: 18px;
    font-weight: 400;
  }
  .info-box {
    width: calc(100% - 32px);
    height: auto;
    padding: 16px 16px 4px;
    margin: 12px 0;
    background-color: #f3f3f3;
    border-radius: 4px;
    .item {
      display: flex;
      width: 100%;
      margin-bottom: 12px;
      .item-title {
        font-size: 16px;
        font-weight: 500;
      }
      .item-content {
        font-size: 16px;
        font-weight: 500;
      }
    }
  }
  .page-box {
    width: 100%;
    height: calc(100% - 120px);
  }
}
</style>
